import React, {Component} from 'react';
import './Menu.scss';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {getLeftMenuData, changeLeftIndex} from '../actions/menuAction';
import Scroll from 'react-bscroll'
import "style-loader!css-loader!react-bscroll/lib/react-scroll.css";
import MenuItem from './MenuItem/MenuItem';
import ShopBar from '../shopBar/shopBar';
import Utils from "../../../utils/utils";

class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.fetchData();
    }

    params = {
        listHeight: [], // 统计右侧的高度
        currIndex: 0
    }

    fetchData () {
        this.props.getLeftMenuDataAction()
    }

    componentDidMount() {
        this.scrollObj = this.menuRightRef.getScrollObj();
    }

    componentDidUpdate() {
        this.calculateHeights();
    }
    // 计算右侧的高度，并统计
    calculateHeights() {
        var myCollection = this.scrollRef.getElementsByClassName('right-item-wrap')
        let height = 0;
        this.params.listHeight.push(height);
        for(let i = 0, len = myCollection.length; i < len; i++) {
            let item = myCollection[i].clientHeight;
            height += item;
            this.params.listHeight.push(height);
        }
    }

    // 点击左侧菜单
    handleClickLeftItem(index) {

        let curr = this.props.currentLeftIndex
        if(curr !== index) {
            let liet = this.params.listHeight
            this.scrollObj.scrollTo(0, -liet[index] ,0);
            this.props.changeLeftIndexAction({
                index: index
            })
        }

    }

    // 渲染左侧列表
    renderLeftList() {
        let _menuData = this.props.menuData;
        let _currentLeftIndex = this.props.currentLeftIndex;
        let leftList = _menuData.food_spu_tags || [];
        return leftList.map((item, index) => {
            let cls = 'left-item';
            if(index === _currentLeftIndex) {
                cls += ' current';
            }
            return (
                <div key={item.tag} className={cls} onClick={() => this.handleClickLeftItem(index)}>
                    {item.icon ? <img className="left-item-icon" src={item.icon} /> : null}
                    {item.name}
                </div>
            )
        })
    }

    // 渲染右侧
    renderMenuRight () {
        let array = this.props.menuData.food_spu_tags || [];
        return array.map((item, index) => {
            return (
                <div key={item.tag} className="right-item-wrap">
                    <p key={1} className="right-title">{item.name}</p>
                    <div key={2} className="right-list">
                        {this.renderRightList(item.spus, index)}
                    </div>
                </div>)
        })

    }

    renderRightList (array, _index) {
        let _array = array || [];
        return _array.map((item, index)=>{
            if (!item.chooseCount) {
                item.chooseCount = 0;
            }
            return <MenuItem key={index} data={item} _index={index} _fuIndex={_index}></MenuItem>
        });
    }

    // 监听滚动
    doMenuScroll(v) {
        let y = v.y;
        let abs_y = Math.abs(y); // 获取滚动
        if(y >= 0) {
            return
        }
        let list = this.params.listHeight;
        let resultIndex = this.props.currentLeftIndex;
        for(let i = 0, len =list.length - 1 ; i < len; i++) {
            if(abs_y >= list[i] && abs_y < list[i+1]) {
                resultIndex = i;
                break;
            }
        }
        this.props.changeLeftIndexAction({
            index: resultIndex
        })
    }

    render() {
        return (
            <div className="wrapper">
                <div className="menu-wrapper clearfix">
                    <div className="menu-left">
                        {this.renderLeftList()}
                    </div>
                    <div className="menu-right" ref={(v) => this.scrollRef = v}>
                        <Scroll scrollbar={false}
                                doScroll={Utils.throttle(this.doMenuScroll.bind(this), 30)}
                                ref={(v) => this.menuRightRef = v}
                                click={true}
                        >
                                {
                                    this.renderMenuRight()
                                }
                        </Scroll>
                    </div>
                </div>
                <div className="shop-bar-wrapper">
                    <ShopBar></ShopBar>
                </div>
            </div>


        )
    }
}

export default connect(
    (state) => {
        return {
            menuData: state.menuReducer.menuData,
            currentLeftIndex: state.menuReducer.currentLeftIndex
        }
    },
    (dispatch) => {
        return {
            getLeftMenuDataAction : bindActionCreators(getLeftMenuData, dispatch),
            changeLeftIndexAction : bindActionCreators(changeLeftIndex, dispatch)
        }
    }
)(Menu);
